<template>
  <div class="history-today">
    <header class="d-flex space-center middle">
      <div class="line"></div>
      <h4>历史的今天</h4>
      <div class="line"></div>
    </header>
    <div class="tabs">
      <van-tabs swipeable sticky @change="changeTab">
        <van-tab v-for="(item, index) in list" :key="index" :title="item.title">
          <line :type="item.id" :date="selectedDate"></line>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import Line from './Line'
import Timeline from './Timeline'
import TimelineEvent from './TimelineEvent'
import TimelineBirth from './TimelineBirth'
import TimelineDie from './TimelineDie'
import tool from '@/utils/tool'

export default {
  components: {
    Line,
    Timeline,
    TimelineEvent,
    TimelineBirth,
    TimelineDie
  },
  props: {
    selectedDate: {
      type: String,
      default: ''
    },
    resetTabHeight: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      top: 0,
      current: 0,
      fixed: false,
      timeline: this.history,
      selectType: '',
      selectTab: '',
      swiperHeight: '',
      list: []
    }
  },
  watch: {
    resetTabHeight (val) {
      this.resetTab()
    }
  },
  onPageScroll: tool.throttle(function (msg) {
    this.fixed = msg[0].scrollTop > this.top
  }),
  onLoad () {
    this.getHistoryTab()
  },
  methods: {
    // 获取历史的今天tab栏
    getHistoryTab () {
      this.$http.get({
        url: this.$services.HISTROY_TODAY_TYPE
      }).then(res => {
        this.list = res.body.data
      })
    },
    // 重新计算tab栏高度
    resetTab () {
      const query = wx.createSelectorQuery() // 创建节点查询器 query
      query.select('#fixed').boundingClientRect() // 获取节点位置信息的查询请求
      query.exec(res => {
        this.top = res[0].top
      })
    },
    // 切换tab
    changeTab (e) {
      this.selectTab = e.target.index
      wx.reportAnalytics('switching_channels_history', {
      })
    },
    // 选择历史的今天tab栏
    select (index) {
      this.current = index
      this.selectTab = index
      index === 0 ? this.selectType = '' : this.selectType = index - 1
    },
    // 切换swiper
    changeSwiper (e) {
      this.current = e.target.current
      this.selectTab = this.current
    },
    // 动态计算swiper高度
    height (e) {
      this.swiperHeight = e + 80 + 'px'
      console.log(this.swiperHeight)
    },
    change (e) {
      this.current = e
    }
  }
}
</script>
<style lang="scss" scoped>
.history-today {
  header {
    h4 {
      padding: 5px 10px;
      color: #ba6749;
      font-size: 20px;
    }
    .line {
      width: 100px;
      border: 1px solid #f5ddd6;
      box-shadow: 3px 3px 5px #f5ddd6;
    }
  }
  .tabs {
    ul {
      // margin-bottom: 10px;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      li {
        flex: 1;
        text-align: center;
      }
      .active {
        color: #ba6749;
        font-weight: bold;
      }
    }
    .fixed {
      position: fixed;
      top: 0;
      width: 100%;
      background: #fff;
      margin-bottom: 20px;
      z-index: 100;
    }
  }
}
</style>

